<template>
	<view class="content">
		<view class="banner">
			<swiper :indicator-dots="false" :autoplay="false">
				<swiper-item>
					<image :src="globalDataApi+detailImage" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="types">
				<view :class="type_index == index?'types_items':'types_item'" v-for="(item,index) in types" :key="index"
					@tap="tap_ind(item,index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="info">
				<view class="name">
					<view class="a">{{detailData.name}}</view>
					<!-- <view class="b">别名：xxx</view> -->
				</view>
				<view class="is_type">
					<view class="item" v-for="(item,index) in is_type" :key="index">
						{{item.name}}
					</view>
				</view>
				<view class="housing_num">
					<view class="span">
						<view class="number" style="color: #FD503E;">
							<!-- {{detailData.price}} -->
							42332<text>元/㎡</text>
						</view>
						<view class="tit">
							参考单价 <uni-icons type="info-filled" color="#d8d8d8" style="margin-top: 3rpx;"></uni-icons>
						</view>
					</view>
					<view class="tiao"></view>
					<view class="span">
						<view class="number">
							{{detailData.prices}} <text>元/套</text>
						</view>
						<view class="tit">
							房贷计算 <uni-icons type="right" color="#000" size="20rpx" style="margin-left: 5rpx;">
							</uni-icons>
						</view>
					</view>
					<view class="tiao"></view>
					<view class="span">
						<view class="number">
							{{detailData.floor_area}} <text>㎡</text>
						</view>
						<view class="tit">
							3/4/5室
						</view>
					</view>
				</view>
				<view class="time">
					<view class="left">
						<uni-icons type="help" style="margin-right: 10rpx;" color="#989898"></uni-icons>
						价格有效期：{{detailData.period_validity}}
					</view>
					<view class="right">
						获取历史成交
					</view>
				</view>
				<view class="icons">
					<view class="icon">
						<image src="/static/housingDetail/icon1.png" mode=""></image>
						<text>获取底价</text>
					</view>
					<view class="icon">
						<image src="/static/housingDetail/icon2.png" mode=""></image>
						<text>预约算价</text>
					</view>
					<view class="icon">
						<image src="/static/housingDetail/icon3.png" mode=""></image>
						<text>变价提醒</text>
					</view>
				</view>
				<view class="error">
					<view class="left">
						层价：<text>具体楼层可咨询售楼处</text>
					</view>
					<view class="right">
						致电售楼处 <uni-icons type="right" color="#0E97FF" size="20rpx"></uni-icons>
					</view>
				</view>
			</view>
			<view class="mobile">
				<view class="left">
					<view class="phone">
						{{detailData.phone}}
					</view>
					<view class="sp">
						致电购房顾问了解更多信息
						<image src="/static/housingDetail/yuan_right.png" mode="widthFix"></image>
					</view>
				</view>
				<image class="icon" src="/static/housingDetail/icon_phone.png" mode=""></image>
			</view>
			<view class="housing_list">
				<view class="housing_type">
					<view :class="housing_type_index == index?'items':'item'" v-for="(item,index) in housing_type"
						:key="index" @tap="housetap_ind(item,index)">
						{{item.name}}
						<view class="tiao"></view>
					</view>
				</view>
				<view class="title">
					户型介绍（5）
				</view>
				<view class="types">
					<view :class="type_index2 == index?'types_items':'types_item'" v-for="(item,index) in types2"
						:key="index" @tap="housetap_ind2(item,index)">
						{{item.name}}
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in houseInfoList" :key="index">
						<image class="image" :src="globalDataApi+item.image" mode=""></image>
						<view class="user">
							<view class="left">
								<image class="avatar" :src="globalDataApi+item.sale[0].avatar" mode=""></image>
								<view class="name">
									{{item.sale[0].nickname}}
								</view>
							</view>
							<view class="right">
								<image class="img1" src="/static/housingDetail/phone.png" mode="widthFix"></image>
								<image class="img2" src="/static/housingDetail/success.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="title">
							{{item.name}}
						</view>
						<view class="span">
							<view class="m">
								{{item.area}}
							</view>
							<view class="o">
								获取开间尺寸
							</view>
						</view>
						<view class="btns">
							<view class="item">
								<image src="/static/housingDetail/btn1.png" mode=""></image>
								<view class="view">
									询底价
								</view>
							</view>
							<view class="item">
								<image src="/static/housingDetail/btn2.png" mode=""></image>
								<view class="view">
									楼栋位置
								</view>
							</view>
							<view class="item">
								<image src="/static/housingDetail/btn3.png" mode=""></image>
								<view class="view">
									房贷首付
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="vr-video">
					<view class="vr">
						VR全景看房
					</view>
					<view class="video">
						视频看房
					</view>
				</view>
			</view>
			<view class="shop_housing">
				<view class="title">
					促销房源
				</view>
				<view class="li">
					<view class="lt" v-for="(item,index) in 6" :key="index">
						<view class="left">
							<view class="top">
								21#- X06
							</view>
							<view class="m">
								110㎡
							</view>
							<view class="price">
								标准总价<text>(万元)</text>:350
							</view>
						</view>
						<view class="right">
							<view class="tit">
								<view class="tiao"></view>
								<text>特惠价</text>
								<view class="tiao"></view>
							</view>
							<view class="new_price">
								320<text>万元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="housing_activity">
				<view class="title">
					售楼处活动
				</view>
				<view class="list1">
					<view class="left">
						<view class="name">
							24购房季节 置业正当时
						</view>
						<view class="span">
							售楼处特价房源即将加推
						</view>
						<view class="types">
							<view class="type1">
								200人已报名
							</view>
							<view class="type2">
								剩余15天
							</view>
						</view>
					</view>
					<view class="btn">
						立即报名
					</view>
				</view>
				<view class="list2">
					<view class="left">
						<view class="name">
							24购房季节 置业正当时
						</view>
						<view class="span">
							售楼处特价房源即将加推
						</view>
						<view class="types">
							<view class="type1">
								200人已报名
							</view>
							<view class="type2">
								剩余15天
							</view>
						</view>
					</view>
					<view class="btn">
						立即报名
					</view>
				</view>
			</view>
			<view class="houseDetail">
				<view class="title">
					<text>楼盘详情</text>
					<view class="goDetail">
						查看详情 >
					</view>
				</view>
				<view class="form">
					<view class="item">
						<view class="name">
							开发商
						</view>
						<view class="text">
							{{detailData.developers_name}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							物业
						</view>
						<view class="text">
							{{detailData.property_name}}
						</view>
					</view>
					<view class="item" style="width: 100%;">
						<view class="name">
							物业费
						</view>
						<view class="text">
							{{detailData.property_price}}
							<!-- 元/m²/月 -->
						</view>
					</view>
					<view class="item">
						<view class="name">
							绿化率
						</view>
						<view class="text">
							{{detailData.greening_rate}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							容积率
						</view>
						<view class="text">
							住宅：{{detailData.plot_ratio}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							总户数
						</view>
						<view class="text">
							1890户
						</view>
					</view>
					<view class="item">
						<view class="name">
							车位比
						</view>
						<view class="text">
							{{detailData.total_parking}}
						</view>
					</view>
				</view>
				<view class="html"
					:style="{height: ishtml?'500rpx':'',overflow: ishtml?'hidden':'',minHeight:ishtml?'500rpx':''}">
					<rich-text nodes=""></rich-text>
					<view class="btn" @tap="tapHtml">
						{{ishtml?'查看更多':'收回'}}
						<image src="/static/housingDetail/bottom.png" mode=""></image>
					</view>
				</view>
				<view class="go_det">
					咨询更多项目基础信息 >
				</view>
			</view>
			<view class="userList">
				<view class="title">
					开发商官方顾问
				</view>
				<view class="types">
					<view class="item">
						<image src="/static/housingDetail/dui.png" mode=""></image>
						<view class="name">
							直属开发商
						</view>
					</view>
					<view class="item">
						<image src="/static/housingDetail/dui.png" mode=""></image>
						<view class="name">
							售楼处接待
						</view>
					</view>
					<view class="item">
						<image src="/static/housingDetail/dui.png" mode=""></image>
						<view class="name">
							非经纪人
						</view>
					</view>
					<view class="item">
						<image src="/static/housingDetail/dui.png" mode=""></image>
						<view class="name">
							不赚差价
						</view>
					</view>
				</view>
				<view class="list">
					<view class="item">
						<image class="avatar" src="" mode=""></image>
						<view class="right">
							<view class="name-time">
								<view class="name">
									李建安
								</view>
								<view class="time">
									免费服务999+人｜服务年限5年以上
								</view>
							</view>
							<view class="type-btn">
								<view class="type">
									<image src="/static/housingDetail/huo.png" mode="widthFix"></image>
									<text>活跃</text>
								</view>
								<view class="btns">
									<image class="img2" src="/static/housingDetail/success.png" mode="widthFix"></image>
									<image class="img1" src="/static/housingDetail/phone.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="hongbao">
				<view class="left">
					<view class="title">
						新房红包
					</view>
					<view class="price">
						¥1888
					</view>
				</view>
				<view class="right">
					<view class="name">
						买房津贴券
					</view>
					<view class="time">
						时间：2024/12/20-2024/12/30
					</view>
				</view>
				<view class="btn">
					立即领取
				</view>
			</view>
			<view class="dongtai">
				<view class="title">
					楼盘动态
				</view>
				<view class="type_title">
					<view class="left">
						<image src="/static/housingDetail/title1.png" mode=""></image>
						<view class="name">
							开盘
						</view>
						<view class="time1">
							2024-04-09
						</view>
					</view>
					<view class="right">
						<image src="/static/housingDetail/title2.png" mode=""></image>
						<view class="name">
							交房
						</view>
						<view class="time1">
							2025-04-09
						</view>
					</view>
				</view>
				<view class="list">
					<view class="left">
						<view class="name">
							双地铁交汇+教育配套齐全+户型实用率高 中建风台怎样？
						</view>
						<view class="type-time">
							<view class="type">
								楼盘导购
							</view>
							<view class="time">
								2025-04-09 12:00:00
							</view>
						</view>
					</view>
					<image class="right" src="/static/housingDetail/img11.png" mode=""></image>
				</view>
				<view class="list width">
					<view class="left">
						<view class="name">
							双地铁交汇+教育配套齐全+户型实用率高 中建风台怎样？
						</view>
						<view class="type-time">
							<view class="type">
								楼盘导购
							</view>
							<view class="time">
								2025-04-09 12:00:00
							</view>
						</view>
					</view>
				</view>
				<view class="go_det">
					新动态通知我 >
				</view>
			</view>
			<view class="ceping">
				<view class="title">
					楼盘测评
				</view>
				<image class="img1" :src="globalDataApi+detailData.evaluation_image" mode="widthFix"></image>
				<view class="go_det">
					查看完整测评报告 >
				</view>
			</view>
			<view class="zixun">
				<view class="title">
					热门咨询
				</view>
				<view class="list">
					<view class="item">
						<image src="/static/housingDetail/zi.png" mode=""></image>
						<text>购房有什么优惠？(10)</text>
					</view>
					<view class="item">
						<image src="/static/housingDetail/zi.png" mode=""></image>
						<text>配套怎么样？(4)</text>
					</view>
					<view class="item">
						<image src="/static/housingDetail/zi.png" mode=""></image>
						<text>周边出行方便吗？(20)</text>
					</view>
					<view class="item">
						<image src="/static/housingDetail/zi.png" mode=""></image>
						<text>带装修吗？(20)</text>
					</view>
				</view>
				<view class="go_det">
					我要咨询 >
				</view>
			</view>
			<view class="dianping">
				<view class="title">
					用户点评 (879)
				</view>
				<view class="type">
					<view class="item" v-for="(item,index) in detailData.commenttags" :key="index">
						<text>{{item.name}} ({{item.count}})</text>
					</view>

				</view>
				<view class="list">
					<view class="item">
						<view class="user">
							<image class="avatar" src="" mode=""></image>
							<view class="nick">
								1*阿松大
							</view>
						</view>
						<view class="tit">
							地铁入户 楼下就是大型商场 不行5分钟的生活圈应有尽有，很不错的楼盘。
						</view>
						<view class="images">
							<image src="" mode="" v-for="(item,index) in 9"></image>
						</view>
					</view>
				</view>
				<view class="go_det">
					我要点评 >
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="left">
				<view class="user">
					<image src="/static/housingDetail/avatar.png" class="avatar" mode=""></image>
					<view class="nick">
						李建安
					</view>
				</view>
				<view class="time">
					<image src="/static/housingDetail/time.png" class="time" mode=""></image>
					<view class="name">
						预约看房
					</view>
				</view>
			</view>
			<view class="right">
				<image src="/static/housingDetail/banner2.png" class="banner" mode=""></image>
				<view class="le">
					<image src="/static/housingDetail/mobile.png" class="phone" mode=""></image>
					<view class="name">
						售楼处
					</view>
				</view>
				<view class="ri">
					<image src="/static/housingDetail/liao.png" class="success" mode=""></image>
					<view class="name">
						聊一聊
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalDataApi: 'http://zysj.oss-cn-guangzhou.aliyuncs.com',
				types: [{
					name: '图片',
					id: 1,
				}, {
					name: '外观',
					id: 2,
				}, {
					name: '户型',
					id: 3,
				}, {
					name: '样板间',
					id: 4,
				}],
				type_index: 0,
				is_type: [{
					name: '不限购'
				}, {
					name: '在售'
				}, {
					name: '住宅'
				}, {
					name: '金地集团'
				}],
				housing_type: [{
					name: '户型'
				}, {
					name: '动态'
				}, {
					name: '周边'
				}, {
					name: '详情'
				}, {
					name: '精选'
				}],
				housing_type_index: 0,
				types2: [],
				type_index2: 0,
				ishtml: true,
				id: "",
				tagsId: "",
				detailData: {},
				detailImage: "",
				houseInfoList: []
			}
		},
		onLoad(option) {
			console.log("传参数据---------", option)
			this.id = option.id
			this.getinit()
			
		},
		methods: {
			getinit() {
				this.$api('api/properties/info', 'GET', {
					id: this.id
				}).then(res => {
					this.detailData = res.data
					this.detailImage = res.data.properties_image
					console.log(res)
				})
				this.getOptionHouse()
			},
			getOptionHouse() {
				this.$api('api/properties/house', 'GET').then(res => {
					console.log("户型、标签列表------------", res.data.house)
					let all = {
						id: "000",
						name: "全部"
					}
					this.types2 = [all, ...res.data.house]
				})
				this.$api('api/properties/houseInfo', 'GET', {
					id: this.id
				}).then(res => {
					this.houseInfoList = [res.data]
					console.log(this.houseInfoList, "户型详情------------", res.data)

				})
			},
			tap_ind(item, index) {
				console.log("图片切换", item.id);
				this.type_index = index
				this.detailImage = ""
				if (item.id == 1) {
					this.detailImage = this.detailData.properties_image
				} else if (item.id == 2) {
					this.detailImage = this.detailData.appearance_images
				} else if (item.id == 3) {
					this.detailImage = this.detailData.house_images
				} else if (item.id == 4) {
					this.detailImage = this.detailData.sample_images
				}

			},
			housetap_ind(item, index) {
				this.housing_type_index = index
			},
			housetap_ind2(item, index) {
				this.type_index2 = index
			},
			tapHtml() {
				this.ishtml = !this.ishtml
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.banner {
		width: 100%;
		height: 562rpx;
		position: relative;

		swiper {
			width: 100%;
			height: 100%;

			swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.types {
			max-width: 95%;
			overflow-x: auto;
			display: flex;
			align-items: center;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 40rpx;
			font-size: 26rpx;
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			color: #fff;

			.types_item {
				padding: 15rpx 30rpx;
			}

			.types_items {
				padding: 15rpx 30rpx;
				color: #222;
				background: #fff;
				border-radius: 40rpx;
			}
		}
	}

	.detail {
		padding: 20rpx;
		box-sizing: border-box;

		.info {
			padding: 20rpx;
			box-sizing: border-box;
			width: 100%;
			background: #fff;
			border-radius: 20rpx;

			.name {
				display: flex;
				align-items: center;

				.a {
					font-weight: 600;
					font-size: 40rpx;
					color: #0B0F12;
				}

				.b {
					font-weight: 400;
					font-size: 24rpx;
					color: #272B2D;
					margin-left: 20rpx;
				}
			}
		}

		.is_type {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.item {
				background: #FFFFFF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #B9BCBE;
				padding: 5rpx 15rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #272B2D;
				text-align: center;
				margin-right: 20rpx;
			}
		}

		.housing_num {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 20rpx;

			.span {
				.number {
					font-weight: 600;
					font-size: 34rpx;
					display: flex;
					justify-content: center;
					align-items: flex-end;

					text {
						margin-left: 5rpx;
						font-weight: 600;
						font-size: 24rpx;
						color: #050709;
					}
				}

				.tit {
					font-weight: 400;
					font-size: 26rpx;
					color: #0B0F12;
					margin-top: 5rpx;
					display: flex;
				}
			}

			.tiao {
				width: 0rpx;
				height: 44rpx;
				border: 2rpx solid #E4E4E4;
			}
		}

		.time {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0;

			.left {
				display: flex;
				font-weight: 400;
				font-size: 24rpx;
				color: #989898;
			}

			.right {
				font-weight: 400;
				font-size: 24rpx;
				color: #0E97FF;
			}
		}

		.icons {
			display: flex;
			align-items: center;
			width: 100%;
			height: 108rpx;
			background: #FFF4F3;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			justify-content: space-evenly;

			.icon {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					margin-top: 10rpx;
					width: 100%;
					font-weight: 400;
					font-size: 24rpx;
					color: #606060;
					text-align: center;
				}
			}
		}

		.error {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.left {
				display: flex;
				font-weight: 400;
				font-size: 24rpx;
				color: #989898;

				text {
					font-weight: 400;
					font-size: 26rpx;
					color: #505050;
				}
			}

			.right {
				font-weight: 400;
				font-size: 24rpx;
				color: #0E97FF;
				display: flex;
			}
		}

		.mobile {
			width: 100%;
			height: 138rpx;
			background: #FFF4F1;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #FCD5D1;
			margin: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			box-sizing: border-box;

			.left {
				.phone {
					font-weight: 600;
					font-size: 48rpx;
					color: #FF901F;
				}

				.sp {
					font-weight: 600;
					font-size: 28rpx;
					color: #343434;
					display: flex;
					align-items: center;

					image {
						width: 25rpx;
						height: 25rpx;
						margin-left: 20rpx;
						margin-top: 3rpx;
					}
				}
			}

			.icon {
				width: 71rpx;
				height: 71rpx;
			}
		}

		.housing_list {
			width: 100%;
			background: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin: 20rpx 0;

			.housing_type {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;

				.items {
					font-weight: 600;
					font-size: 32rpx;
					color: #FE4736;

					.tiao {
						width: 64rpx;
						height: 6rpx;
						background: #FE4736;
						border-radius: 2rpx 2rpx 2rpx 2rpx;
						opacity: 0.22;
						margin-top: 5rpx;
					}
				}

				.item {
					font-weight: 500;
					font-size: 32rpx;
					color: #4B4F50;

					.tiao {
						width: 64rpx;
						height: 6rpx;
						background: transparent;
						border-radius: 2rpx 2rpx 2rpx 2rpx;
						opacity: 0.22;
						margin-top: 5rpx;
					}
				}
			}

			.title {
				font-weight: 600;
				font-size: 30rpx;
				color: #4B4F50;
				margin: 20rpx 0;
			}

			.types {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 10rpx;

				.types_item {
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #F2F2F2;
					font-weight: 400;
					font-size: 22rpx;
					color: #8E8E8E;
					padding: 5rpx 15rpx;
					margin-right: 20rpx;
				}

				.types_items {
					background: linear-gradient(180deg, #FE6D4F 0%, #EC8D39 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid transparent;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					padding: 5rpx 15rpx;
					margin-right: 20rpx;
				}
			}

			.list::-webkit-scrollbar {
				width: 0;
				height: 0;
				background: transparent;
			}

			.list {
				width: 100%;
				display: flex;
				align-items: center;
				overflow: auto;
				margin-top: 20rpx;

				.item {
					width: 420rpx;
					margin-right: 20rpx;

					.image {
						width: 420rpx;
						height: 238rpx;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						background: #ccc;
					}

					.user {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							width: 70%;
							display: flex;
							align-items: center;

							.avatar {
								width: 60rpx;
								height: 60rpx;
								border-radius: 10rpx;
								background: #ccc;
							}

							.name {
								font-weight: 400;
								font-size: 28rpx;
								color: #2C2C2C;
								margin-left: 10rpx;
							}
						}

						.right {
							width: 30%;
							display: flex;
							align-items: center;
							justify-content: space-around;

							image {
								width: 52rpx;
								height: 52rpx;
							}
						}
					}

					.title {
						width: 100%;
						font-weight: 500;
						font-size: 36rpx;
						color: #2C2C2C;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin: 5rpx 0;
					}

					.span {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.m {
							font-weight: 400;
							font-size: 28rpx;
							color: #9D9D9D;
						}

						.o {
							font-weight: 500;
							font-size: 28rpx;
							color: #FF5703;
						}
					}

					.btns {
						width: 100%;
						height: 122rpx;
						background: #FFF4F1;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						margin-top: 5rpx;

						.item {
							width: 170rpx;
							text-align: center;

							image {
								width: 43rpx;
								height: 43rpx;
							}

							.view {
								width: 100%;
								font-weight: 400;
								font-size: 26rpx;
								color: #FF5703;
							}
						}
					}
				}
			}

			.vr-video {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10rpx;

				.vr {
					width: 49%;
					height: 88rpx;
					background: #FFF4F1;
					font-weight: 500;
					font-size: 28rpx;
					color: #FF5703;
					line-height: 88rpx;
					text-align: center;
				}

				.video {
					width: 49%;
					height: 88rpx;
					background: #FFF4F1;
					font-weight: 500;
					font-size: 28rpx;
					color: #FF5703;
					line-height: 88rpx;
					text-align: center;
				}
			}
		}

		.shop_housing {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			margin: 20rpx 0;
			box-sizing: border-box;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			.li {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.lt {
					width: 334rpx;
					height: 152rpx;
					background: linear-gradient(169deg, #F19C38 0%, #DA612B 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 10rpx;
					box-sizing: border-box;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;

					.left {
						width: 50%;
						height: 100%;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;

						.tit {
							width: 100%;
							font-weight: 400;
							font-size: 28rpx;
							color: #FFFFFF;
							border-bottom: 1rpx solid #fff;
							padding-bottom: 5rpx;
							margin-bottom: 5rpx;
						}

						.m {
							width: 100%;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
						}

						.price {
							font-weight: 400;
							font-size: 18rpx;
							color: #FFFFFF;
							line-height: 34rpx;

							text {
								font-size: 12rpx;
							}
						}
					}

					.right {
						width: 50%;
						height: 100%;
						background: #FFFFFF;
						border-radius: 2rpx 2rpx 2rpx 2rpx;
						color: #355772;
						padding: 20rpx 0;
						box-sizing: border-box;

						.tit {
							display: flex;
							align-items: center;
							justify-content: center;

							text {
								font-weight: 400;
								font-size: 20rpx;
								color: #355772;
							}

							.tiao {
								width: 34rpx;
								height: 0rpx;
								border: 1rpx solid #355772;
							}
						}

						.new_price {
							font-size: 66rpx;

							text {
								font-weight: 400;
								font-size: 16rpx;
								color: #355772;
							}
						}
					}
				}
			}
		}

		.housing_activity {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			.list1 {
				width: 100%;
				height: 222rpx;
				background: #FFFBF9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #FF7C35;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.left {
					width: 80%;

					.name {
						width: 100%;
						font-weight: 500;
						font-size: 30rpx;
						color: #2E3031;
					}

					.span {
						font-weight: 400;
						font-size: 24rpx;
						color: #7C7C7C;
						margin-top: 20rpx;
						margin-bottom: 10rpx;
					}

					.types {
						width: 100%;
						display: flex;
						align-items: center;

						.type1 {
							background: #F7DCD8;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							padding: 5rpx 10rpx;
							border: 2rpx solid transparent;
							margin-right: 10rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #EA5642;
							text-align: center;
						}

						.type2 {
							background: transparent;
							padding: 5rpx 10rpx;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							border: 2rpx solid #EA5642;
							color: #EA5642;
							font-weight: 400;
							font-size: 24rpx;
							color: #EA5642;
							text-align: center;
						}
					}
				}

				.btn {
					width: 160rpx;
					height: 72rpx;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					border: 2rpx solid #EA5642;
					font-weight: 500;
					font-size: 28rpx;
					color: #EA5642;
					line-height: 72rpx;
					text-align: center;
				}
			}

			.list2 {
				width: 100%;
				height: 222rpx;
				background: #F5FEFE;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #2AD8D8;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				box-sizing: border-box;

				.left {
					width: 80%;

					.name {
						width: 100%;
						font-weight: 500;
						font-size: 30rpx;
						color: #2E3031;
					}

					.span {
						font-weight: 400;
						font-size: 24rpx;
						color: #7C7C7C;
						margin-top: 20rpx;
						margin-bottom: 10rpx;
					}

					.types {
						width: 100%;
						display: flex;
						align-items: center;

						.type1 {
							background: #F7DCD8;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							padding: 5rpx 10rpx;
							border: 2rpx solid transparent;
							margin-right: 10rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #EA5642;
							text-align: center;
						}

						.type2 {
							background: transparent;
							padding: 5rpx 10rpx;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							border: 2rpx solid #0CD2D5;
							font-weight: 400;
							font-size: 24rpx;
							color: #0CD2D5;
							text-align: center;
						}
					}
				}

				.btn {
					width: 160rpx;
					height: 72rpx;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					border: 2rpx solid #0CD2D5;
					font-weight: 500;
					font-size: 28rpx;
					color: #0CD2D5;
					line-height: 72rpx;
					text-align: center;
				}
			}
		}

		.houseDetail {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.goDetail {
					font-size: 24rpx;
					color: #A1A6AC;
					display: flex;
					align-items: center;
				}
			}

			.form {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.item {
					display: flex;
					align-items: center;
					min-width: 50%;
					margin-bottom: 10rpx;

					.name {
						font-weight: 400;
						font-size: 28rpx;
						color: #919191;
						margin-right: 10rpx;
					}

					.text {
						font-weight: 400;
						font-size: 28rpx;
						color: #1A1A1A;
					}
				}
			}

			.html {
				width: 100%;
				position: relative;

				.btn {
					position: absolute;
					width: 196rpx;
					height: 60rpx;
					background: #FF5500;
					border-radius: 44rpx 44rpx 44rpx 44rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					bottom: 30rpx;
					left: 50%;
					transform: translate(-50%);

					image {
						width: 24rpx;
						height: 10rpx;

					}
				}
			}

			.go_det {
				width: 100%;
				height: 104rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF5500;
				line-height: 104rpx;
				text-align: center;
			}
		}

		.userList {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			.types {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					.name {
						font-weight: 400;
						font-size: 24rpx;
						color: #919191;
						margin-left: 5rpx;
					}
				}
			}

			.list {
				width: 100%;
				margin-top: 20rpx;

				.item {
					width: 100%;
					background: #FFF4F1;
					padding: 15rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.avatar {
						width: 114rpx;
						height: 114rpx;
						border-radius: 50%;
					}

					.right {
						width: 80%;

						.name-time {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.name {
								font-weight: 500;
								font-size: 32rpx;
								color: #04070A;
							}

							.time {
								font-weight: 400;
								font-size: 24rpx;
								color: #919191;
							}
						}

						.type-btn {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.type {
								display: flex;
								align-items: center;

								image {
									width: 30rpx;
									height: 30rpx;
								}

								text {
									font-weight: 400;
									font-size: 24rpx;
									color: #919191;
									margin-left: 10rpx;
								}
							}

							.btns {
								width: 200rpx;
								display: flex;
								align-items: center;
								justify-content: space-around;

								image {
									width: 52rpx;
									height: 52rpx;
								}
							}
						}
					}
				}
			}
		}

		.hongbao {
			width: 100%;
			padding: 10rpx;
			box-sizing: border-box;
			height: 124rpx;
			background: linear-gradient(90deg, #FE4D3D 0%, #FF988E 100%);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			align-items: center;

			.left {
				width: 201rpx;
				height: 100rpx;
				background: #FFD2CE;
				border-radius: 5rpx;
				border-top-right-radius: 60rpx;
				border-bottom-right-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;

				.title {
					font-weight: 500;
					font-size: 24rpx;
					color: #FE4736;
				}

				.price {
					font-weight: 600;
					font-size: 44rpx;
					color: #F88C48;
				}
			}

			.right {
				width: 70%;
				padding-left: 10rpx;

				.name {
					font-weight: 600;
					font-size: 34rpx;
					color: #FFFFFF;
				}

				.time {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					margin: 0;
					margin-top: 10rpx;
				}
			}

			.btn {
				width: 112rpx;
				height: 46rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #EC622A;
				line-height: 46rpx;
				text-align: center;
			}
		}

		.dongtai {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			.type_title {
				width: 100%;
				height: 105rpx;
				position: relative;

				.left {
					width: 50%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					align-content: center;
					flex-wrap: wrap;

					image {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
					}

					.name {
						width: 100%;
						text-align: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #30CD90;
						position: relative;
					}

					.time1 {
						width: 100%;
						text-align: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #30CD90;
						position: relative;
						margin-top: 10rpx;
					}
				}

				.right {
					width: 50%;
					height: 100%;
					position: absolute;
					right: 0;
					top: 0;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					align-content: center;

					image {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
					}

					.name {
						width: 100%;
						text-align: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #292929;
						position: relative;
					}

					.time1 {
						width: 100%;
						text-align: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #292929;
						position: relative;
						margin-top: 10rpx;
					}
				}
			}

			.list:last-child {
				border: 0;
			}

			.width {
				.left {
					width: 100% !important;
				}

				.type {
					color: #FFAC28 !important;
					background: #FFF5E5 !important;
				}
			}

			.list {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #e3e3e3;
				margin: 20rpx 0;
				padding: 20rpx 0;

				.left {
					width: 490rpx;

					.name {
						width: 100%;
						font-weight: 400;
						font-size: 28rpx;
						color: #292929;
					}

					.type-time {
						width: 100%;
						display: flex;
						align-items: center;

						.type {
							width: 158rpx;
							height: 44rpx;
							background: #F7DCD8;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #EA5642;
							line-height: 44rpx;
							text-align: center;
							margin-right: 10rpx;
						}

						.time {
							font-weight: 400;
							font-size: 24rpx;
							color: #8D8D8D;
						}
					}
				}

				.right {
					width: 186rpx;
					height: 152rpx;
				}
			}

			.go_det {
				width: 100%;
				height: 104rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF5500;
				line-height: 104rpx;
				text-align: center;
			}
		}

		.ceping {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			.img1 {
				width: 100%;
				height: 300rpx;
			}

			.go_det {
				width: 100%;
				height: 104rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF5500;
				line-height: 104rpx;
				text-align: center;
			}
		}

		.zixun {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			.list {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 49%;
					background: #FCF4F2;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 15rpx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 10rpx;

					image {
						width: 35rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}

					font-weight: 400;
					font-size: 28rpx;
					color: #2A2B2E;
				}
			}


			.go_det {
				width: 100%;
				height: 104rpx;
				margin-top: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF5500;
				line-height: 104rpx;
				text-align: center;
			}
		}

		.dianping {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			.type {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.item {
					background: #F7F9F9;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					padding: 20rpx 30rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #2A2B2E;
					margin-right: 30rpx;
					margin-bottom: 20rpx;
				}
			}

			.list {
				width: 100%;

				.item {
					width: 100%;
					margin-bottom: 10rpx;

					.user {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;

						.avatar {
							width: 76rpx;
							height: 76rpx;
							border-radius: 50%;
							background: #ccc;
						}

						.nick {
							font-weight: 500;
							font-size: 28rpx;
							color: #2A2B2E;
						}
					}

					.tit {
						font-weight: 400;
						font-size: 28rpx;
						color: #2A2B2E;
					}

					.images {
						width: 100%;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						justify-content: space-evenly;
						margin-top: 20rpx;

						image {
							width: 218rpx;
							height: 222rpx;
							background: #ccc;
							margin-bottom: 5rpx;
						}
					}
				}
			}

			.go_det {
				width: 100%;
				height: 104rpx;
				margin-top: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF5500;
				line-height: 104rpx;
				text-align: center;
			}
		}
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 142rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;

		.left {
			width: 40%;
			display: flex;
			align-items: center;

			.user {
				width: 50%;
				text-align: center;

				image {
					width: 54rpx;
					height: 54rpx;
				}

				.nick {
					font-weight: 400;
					font-size: 26rpx;
					color: #04070A;
				}
			}

			.time {
				width: 50%;
				text-align: center;
				margin-top: 10rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				.name {
					font-weight: 400;
					font-size: 26rpx;
					color: #9F9F9F;
				}
			}
		}

		.right {
			width: 60%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.banner {
				position: absolute;
				width: 100%;
				height: 88rpx;
			}

			.le {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;

				.phone {
					width: 29rpx;
					height: 27rpx;
					position: relative;
					margin-right: 10rpx;
				}

				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					position: relative;
				}
			}

			.ri {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.success {
					width: 43rpx;
					height: 33rpx;
					position: relative;
					margin-right: 10rpx;
				}

				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					position: relative;
				}
			}
		}
	}
</style>
